이 위젯은 새 설치의 사용 예제에도 포함됩니다. 프런트엔드 JavaScript 코드 노트를 만들고 #widget 라벨을 지정하세요.

/*
 * 현재 텍스트 노트의 단어 수와 글자 수를 표시하는 위젯입니다.
 * 사용할 노트에 wordCount 라벨을 지정하세요. 상속을 켜면 하위 트리 전체에 적용됩니다.
 * 
 * 책 예제와 그 하위 노트에서 확인할 수 있습니다.
 */
const TPL = `<div style="padding: 10px; border-top: 1px solid var(--main-border-color); contain: none;">
    <strong>단어 수: </strong>
    <span class="word-count"></span>

    &nbsp;

    <strong>글자 수: </strong>
    <span class="character-count"></span>
</div`;

class WordCountWidget extends api.NoteContextAwareWidget {
    get position() { return 100; } // 값이 클수록 아래쪽이나 오른쪽에 배치합니다.
    
    get parentWidget() { return 'center-pane'; }
    
    doRender() {
        this.$widget = $(TPL);
        this.$wordCount = this.$widget.find('.word-count');
        this.$characterCount = this.$widget.find('.character-count');
        return this.$widget;
    }
    
    async refreshWithNote(note) {
        if (note.type !== 'text' || !note.hasLabel('wordCount')) { 
            // 텍스트 노트에 wordCount 라벨이 있을 때만 표시합니다.
            this.toggleInt(false); // 숨기기
            
            return;
        }
        
        this.toggleInt(true); // 표시하기
        
        const {content} = await note.getNoteComplement();
        
        const text = $(content).text(); // 서식 없이 글자만 가져오기
        
        const counts = this.getCounts(text);

        this.$wordCount.text(counts.words);
        this.$characterCount.text(counts.characters);
    }
    
    getCounts(text) {
        const chunks = text
            .split(/[\s-+:,/\\]+/)
            .filter(chunk => chunk !== '');
        
        let words;
        
        if (chunks.length === 1 && chunks[0] === '') {
            words = 0;
        }
        else {
            words = chunks.length;
        }
        
        const characters = chunks.join('').length;
        
        return {words, characters};
    }
    
    async entitiesReloadedEvent({loadResults}) {
        if (loadResults.isNoteContentReloaded(this.noteId)) {
            this.refresh();
        }
    }
}

module.exports = new WordCountWidget();

변경한 뒤 화면 구성을 다시 만들도록 Trilium을 새로고침하세요. 노트 아래에 다음과 같이 표시됩니다.

예제는 공백과 일부 기호로 나눈 조각을 단어로 셉니다. 한국어 형태소 분석에 따른 단어 수는 아닙니다.